
import { ComponentProps, VueComponent } from "vue3-oop";
import { FormItem, Input,InputNumber,RadioGroup,RadioButton } from 'ant-design-vue';
import { WidgetItem } from '@/components/FormDesigner/types';
import { FORMITEM } from "../attr-widget";

interface IProps {
  widgetItem: WidgetItem
}
export default class CfgFormitem extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetItem: {}
  }

  render() {
    const { widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as FORMITEM;
    return (
      <>
        <FormItem label="标签宽度">
          <InputNumber size='small' min={50} addon-after="px"
            value={attr.formitem_labelWidth}
            onChange={(value) => { attr.formitem_labelWidth = Number(value) }}
          />
        </FormItem>
        <FormItem label="标签对齐">
          <RadioGroup
            size='small'
            value={attr.formitem_labelAlign}
            onChange={(event) => { attr.formitem_labelAlign = event.target.value }}
          >
            <RadioButton value='left' >左</RadioButton>
            <RadioButton value='right' >右</RadioButton>
          </RadioGroup>
        </FormItem>
      </>
    )
  }
}